// gulp配置文件
const gulp = require("gulp"),
    htmlmin = require("gulp-htmlmin"),
    uglify = require("gulp-uglify"),
    babel = require("gulp-babel"),
    sass = require("gulp-sass"),
    cleanCss = require("gulp-clean-css"),
    connect = require("gulp-connect")

// 定制html任务
gulp.task("html", function () {
    // 找到原始文件
    gulp.src("src/**/*.html")
        // 对这个原始文件做一些处理
        .pipe(htmlmin({
            // 清除HTML注释
            removeComments: true,
            // 压缩HTML
            collapseWhitespace: true,
            // 省略布尔属性的值 <input checked="true"/> ==> <input checked/>
            collapseBooleanAttributes: true,
            // 删除所有空格作属性值 <input id="" /> ==> <input />
            removeEmptyAttributes: true,
            // 删除<script>的type="text/javascript"
            removeScriptTypeAttributes: false,
            // 删除<style>和<link>的type="text/css"
            removeStyleLinkTypeAttributes: false,
            // 压缩页面JS
            minifyJS: true,
            // 压缩页面CSS 
            minifyCSS: true
        }))
        // 生成新的文件
        .pipe(gulp.dest("dist"))
        .pipe(connect.reload())
})

// 定制css任务
// 将scss文件转为css，再压缩
gulp.task("css", function () {
    gulp.src("src/css/**/*.scss")
        // scss 转 css
        .pipe(sass())
        // 压缩css代码
        .pipe(cleanCss())
        .pipe(gulp.dest("dist/css"))
        .pipe(connect.reload())
})
// 将css文件直接压缩
gulp.task("csss", function () {
    gulp.src("src/css/**/*.css")
        .pipe(cleanCss())
        .pipe(gulp.dest("dist/css"))
        .pipe(connect.reload())
})

// 定制js任务
gulp.task("js", function () {
    gulp.src("src/js/**/*.js")
        // ES6转换为ES5
        .pipe(babel({
            presets: ['@babel/env']
        }))
        // 压缩js代码
        .pipe(uglify())
        .pipe(gulp.dest("dist/js"))
        .pipe(connect.reload())
})

// 定制图片任务
gulp.task("img", function () {
    gulp.src("src/images/**")
        .pipe(gulp.dest("dist/images"))
        .pipe(connect.reload())
})

// 定制lib任务
gulp.task("lib", function () {
    gulp.src("src/lib/**")
    .pipe(gulp.dest("dist/lib"))
    .pipe(connect.reload())
})


// 定制监控任务
gulp.task("watch", function () {
    gulp.watch("src/**/*.html", ["html"])
    gulp.watch("src/css/**/*.scss", ["css"])
    gulp.watch("src/css/**/*.css", ["csss"])
    gulp.watch("src/js/**/*.js", ["js"])
    gulp.watch("src/images/**", ["img"])
    gulp.watch("src/lib/**", ["lib"])
})

// 定制服务器任务
gulp.task("server", function () {
    connect.server({
        livereload: true,
        port: 2003,
        root: "dist"
    })
})

// 定制默认任务
gulp.task("default", ["html", "css", "csss", "js", "img", "lib", "watch", "server"])